<template>
	  <a class="cover" :href="linkTo">
			<div class="mask">
				<img class="relay" ref="icon" src="../../assets/img/播放.png" alt="">
			</div>
			<div class="img" ref="img">
				<slot></slot>
			</div>
			
		</a>
</template>

<script>
	
  export default{
    name:'',
    data(){
      return {
		  
       }
    },
	props:{
		linkTo:{
		  type:String,
		  default(){
			  return ""
		  }
		},
	  describe:{
		  type:String,
		  default(){
			  return ""
		  }
	  },
	  relayNum:{
		  type:String,
		  default(){
		  	return ""
		  }
	  },
	},
    methods:{
      initIcon(){
				let height=parseInt(getComputedStyle(this.$refs.img,null).height)
				let width=parseInt(getComputedStyle(this.$refs.img,null).width)
				let max=height>width?height:width
				this.$refs.icon.style.width=this.$refs.icon.style.height=max/4+'px'
			}
    },
    components:{
       
    },
		mounted() {
			this.initIcon()
		}
  }
</script>

<style scoped>
	.mask{
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		transition: opacity 1s;
		opacity: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		z-index: 10;
	}
	.cover{
		overflow: hidden;
		position: relative;
	}
	.cover:hover .img{
		transform: scale(1.1);
	}
	.cover:hover .mask{
		opacity: 1;
	}
	.cover,.cover .img{
		transition: all 1s;
	}
	.relay{
		width: 25%;
		height: 25%;
	}
</style>
